<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调整记录审计 - 房间管理系统</title>
    <style>
        :root {
            --sidebar-width: 250px;
        }
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
        }
        .sidebar {
            width: var(--sidebar-width);
            height: 100vh;
            position: fixed;
            background: #343a40;
            color: white;
            transition: all 0.3s;
        }
        .main-content {
            margin-left: var(--sidebar-width);
            padding: 20px;
            transition: all 0.3s;
        }
        .navbar {
            padding-left: var(--sidebar-width);
        }
        .card {
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .table th {
            white-space: nowrap;
        }
        .sortable {
            cursor: pointer;
        }
        .sortable:hover {
            text-decoration: underline;
        }
        @media (max-width: 768px) {
            .sidebar {
                margin-left: -var(--sidebar-width);
            }
            .main-content {
                margin-left: 0;
            }
            .navbar {
                padding-left: 0;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">监狱房间管理系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('main.index') }}"><i class="bi bi-house-door"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('main.rooms') }}"><i class="bi bi-door-open"></i> 房间管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="{{ url_for('main.record') }}"><i class="bi bi-journal-text"></i> 记录审计</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header p-3">
            <h5>记录审计</h5>
        </div>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link text-white" href="{{ url_for('main.record') }}?type=seat">
                    <i class="bi bi-person-seat"></i> 座位调整
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-white" href="{{ url_for('main.record') }}?type=bed">
                    <i class="bi bi-bed"></i> 铺位调整
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-white" href="{{ url_for('main.record') }}?type=schedule">
                    <i class="bi bi-calendar-event"></i> 值班表调整
                </a>
            </li>
        </ul>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="bi bi-journal-text"></i> 调整记录审计</h5>
            </div>
            <div class="card-body">
                <form method="get" action="{{ url_for('main.record') }}" class="mb-4">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label for="type" class="form-label">记录类型</label>
                            <select name="type" id="type" class="form-select">
                                <option value="">全部</option>
                                <option value="seat" {% if record_type=='seat' %}selected{% endif %}>座位调整</option>
                                <option value="bed" {% if record_type=='bed' %}selected{% endif %}>铺位调整</option>
                                <option value="schedule" {% if record_type=='schedule' %}selected{% endif %}>值班表调整</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="start_date" class="form-label">开始日期</label>
                            <input type="date" name="start_date" id="start_date" class="form-control" value="{{ start_date }}">
                        </div>
                        <div class="col-md-3">
                            <label for="end_date" class="form-label">结束日期</label>
                            <input type="date" name="end_date" id="end_date" class="form-control" value="{{ end_date }}">
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary me-2"><i class="bi bi-funnel"></i> 筛选</button>
                            <a href="{{ url_for('main.record') }}" class="btn btn-outline-secondary"><i class="bi bi-arrow-counterclockwise"></i> 重置</a>
                        </div>
                    </div>
                </form>

                <div class="table-responsive">
                    <table class="table table-hover table-striped table-bordered">
                        <thead class="table-primary">
                            <tr>
                                <th class="sortable {% if sort_field=='type' %}text-white{% endif %}" data-sort="type"><i class="bi bi-tag"></i> 类型</th>
                                <th class="sortable {% if sort_field=='room' %}text-white{% endif %}" data-sort="room"><i class="bi bi-door-closed"></i> 房间号</th>
                                <th><i class="bi bi-card-text"></i> 调整内容</th>
                                <th><i class="bi bi-chat-square-text"></i> 调整原因</th>
                                <th class="sortable {% if sort_field=='operator' %}text-white{% endif %}" data-sort="operator"><i class="bi bi-person"></i> 操作人</th>
                                <th class="sortable {% if sort_field=='time' %}text-white{% endif %}" data-sort="time"><i class="bi bi-clock"></i> 操作时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for record in records %}
                            <tr>
                                <td>{{ record.type_display }}</td>
                                <td>{{ record.room_number }}</td>
                                <td>{{ record.change_description }}</td>
                                <td>{{ record.change_reason or '--' }}</td>
                                <td>{{ record.username }}</td>
                                <td>{{ record.operation_time.strftime('%Y-%m-%d %H:%M') }}</td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="6" class="text-center">暂无记录</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                {% if total_pages > 1 %}
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        {% if current_page > 1 %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('main.record', page=current_page-1, type=record_type, start_date=start_date, end_date=end_date, sort=sort_field) }}">
                                <i class="bi bi-chevron-left"></i> 上一页
                            </a>
                        </li>
                        {% endif %}

                        {% for page_num in range(1, total_pages+1) %}
                        <li class="page-item {% if page_num == current_page %}active{% endif %}">
                            <a class="page-link" href="{{ url_for('main.record', page=page_num, type=record_type, start_date=start_date, end_date=end_date, sort=sort_field) }}">{{ page_num }}</a>
                        </li>
                        {% endfor %}

                        {% if current_page < total_pages %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('main.record', page=current_page+1, type=record_type, start_date=start_date, end_date=end_date, sort=sort_field) }}">
                                下一页 <i class="bi bi-chevron-right"></i>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            </div>
        </div>
    </div>

    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/bootstrap-icons.css" rel="stylesheet">
    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <script>
    $(document).ready(function() {
        // 排序功能
        $('.sortable').click(function() {
            const sortField = $(this).data('sort');
            const url = new URL(window.location.href);
            url.searchParams.set('sort', sortField);
            window.location.href = url.toString();
        });

        // 响应式侧边栏
        $('.navbar-toggler').click(function() {
            $('.sidebar').toggleClass('show');
        });
    });
    </script>
</body>
</html>
